<template>
    <view class="content">
        <view class="bg"></view>
        <view class="wrapper">
            <view class="box">
                <view class="item">
                    <view class="grey">头像</view>
                    <view class="img-box" @click="$screenshot('logo',1,1)">
                        <image :src="img || '/static/icon/avatar.png'" class="avatar"></image>
                        <view class="up">上传头像</view>    
                    </view>
                </view>
                <view class="item">
                    <view class="grey">手机号</view>
                    <view class="item-right">
                        <input type="number" v-model="tel" placeholder="请输入手机号" class="inp" disabled>
                    </view>
                </view>
                <view class="item" @click="show_1 = true">
                    <view class="grey">婚姻状况</view>
                    <view class="item-right">
                        <input type="text" v-model="marriage" placeholder="请选择" class="inp" disabled>
                        <u-icon name="arrow-down-fill" color="#535353" size="24" class="u-m-l-10"></u-icon>
                    </view>
                </view>
                <view class="item" @click="show_2 = true">
                    <view class="grey">学历</view>
                    <view class="item-right">
                        <input type="text" v-model="education" placeholder="请选择" class="inp" disabled>
                        <u-icon name="arrow-down-fill" color="#535353" size="24" class="u-m-l-10"></u-icon>
                    </view>
                </view>
                <view class="item">
                    <view class="grey">家庭人口数</view>
                    <view class="item-right">
                        <input type="number" v-model="people_num" placeholder="请输入家庭人口数" class="inp">
                    </view>
                </view>
                <view class="item" @click="show_3 = true">
                    <view class="grey">宗教信仰</view>
                    <view class="item-right">
                        <input type="text" v-model="belief" placeholder="请选择" class="inp" disabled>
                        <u-icon name="arrow-down-fill" color="#535353" size="24" class="u-m-l-10"></u-icon>
                    </view>
                </view>
                <view class="item" @click="show_4 = true">
                    <view class="grey">政治面貌</view>
                    <view class="item-right">
                        <input type="text" v-model="politics" placeholder="请选择" class="inp" disabled>
                        <u-icon name="arrow-down-fill" color="#535353" size="24" class="u-m-l-10"></u-icon>
                    </view>
                </view>
            </view>
            
            <view class="btn" @click="doSubmit">确认提交</view>
        </view>
        
        <!-- 婚姻状况 -->
        <u-select v-model="show_1" mode="single-column" :list="data.marriage" value-name="id" label-name="name" @confirm="confirm($event, 1)"></u-select>
        <!-- 学历 -->
        <u-select v-model="show_2" mode="single-column" :list="data.education" value-name="id" label-name="name" @confirm="confirm($event, 2)"></u-select>
        <!-- 宗教信仰 -->
        <u-select v-model="show_3" mode="single-column" :list="data.belief" value-name="id" label-name="name" @confirm="confirm($event, 3)"></u-select>
        <!-- 政治面貌 -->
        <u-select v-model="show_4" mode="single-column" :list="data.politics" value-name="id" label-name="name" @confirm="confirm($event, 4)"></u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show_1: false,
                show_2: false,
                show_3: false,
                show_4: false,
                data: {},//下拉选项
                img: '',
                imgId: '',//头像
                tel: '',
                marriage: '',//婚姻
                marriage_id: '',
                education: '',//学历
                education_id: '',
                people_num: '',//家庭人口数
                belief: '',//宗教信仰
                belief_id: '',
                politics: '',//政治面貌
                politics_id: '',
            };
        },
        onLoad() {
            var _this =this
            uni.$on('uAvatarCropper', data => {
                _this.$upLoadPic(data.path).then(ret => {
                    // console.log(ret)
                    if (data.fromWhere == "logo"){
                        _this.imgId = ret.detail.image_id
                        _this.img = ret.detail.image
                    }
                });
            })
            
            this.getInfo()
            this.getOption()
        },
        methods: {
            getInfo() {
            	this.$ajax('user_detail', {
            		user_token: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.tel = ret.detail.mobile
                        if (ret.detail.status == 3) {
                            this.img = ret.detail.service_img
                            this.imgId = ret.detail.service_img_id
                            this.marriage = ret.detail.marriage
                            this.marriage_id = ret.detail.marriage_id
                            this.education = ret.detail.education
                            this.education_id = ret.detail.education_id
                            this.people_num = ret.detail.people_num
                            this.belief = ret.detail.belief
                            this.belief_id = ret.detail.belief_id
                            this.politics = ret.detail.politics
                            this.politics_id = ret.detail.politics_id
                        }
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            doSubmit() {
                if (!this.imgId) {
                    this.$toast('请上传头像')
                    return
                }
                if (!this.marriage_id) {
                    this.$toast('请选择婚姻状况')
                    return
                }
                if (!this.education_id) {
                    this.$toast('请选择学历')
                    return
                }
                if (!this.people_num) {
                    this.$toast('请输入家庭人口数')
                    return
                }
                if (!this.belief_id) {
                    this.$toast('请选择宗教信仰')
                    return
                }
                if (!this.politics_id) {
                    this.$toast('请选择政治面貌')
                    return
                }
                this.$ajax('apply_service', {
                	user_token: this.$getSync('userToken'),
                    service_img_id: this.imgId,//头像id
                    marriage_id: this.marriage_id,//婚姻状态id
                    education_id: this.education_id,//学历id
                    people_num: this.people_num,//家庭人口数量
                    belief_id: this.belief_id,//宗教信仰id
                    politics_id: this.politics_id,//政治面貌id
                }).then(ret => {
                	if (ret.success == 1000) {
                		this.$toast('提交成功')
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            confirm(e, num) {
                console.log(e);
                if (num == 1) {
                    this.marriage = e[0].label
                    this.marriage_id = e[0].value
                } else if (num == 2) {
                    this.education = e[0].label
                    this.education_id = e[0].value
                } else if (num == 3) {
                    this.belief = e[0].label
                    this.belief_id = e[0].value
                } else if (num == 4) {
                    this.politics = e[0].label
                    this.politics_id = e[0].value
                }
            },
            
            // 获取下拉选项
            getOption(){
            	this.$ajax('apply_service_option', {
            		
            	}).then(ret => {
            		if (ret.success == 1000) {
            			this.data = ret.detail
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5;
    }
    .bg {
    	width: 100%;
    	height: 390rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
    	background: linear-gradient(to bottom, #f29700, #f5f5f5);
    }
    .wrapper{
        padding: 20rpx;
    }
    .box{
        padding: 0 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
        margin-bottom: 30rpx;
    }
    .item{
        padding: 35rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #eee;
    }
    .item:last-child{
        border-bottom: none;
    }
    .grey{
        color: #949494;
    }
    .img-box{
        position: relative;
    }
    .avatar{
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
    }
    .up{
        width: 100rpx;
        height: 33rpx;
        background-color: #f6f6f6;
        border-radius: 6rpx;
        font-size: 22rpx;
        color: #9a9a9a;
        text-align: center;
        line-height: 33rpx;
        position: absolute;
        bottom: -10rpx;
        left: 50%;
        transform: translateX(-50%);
    }
    .item-right{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 15rpx;
    }
    .inp{
        flex: 1;
        text-align: right;
    }
    
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #f29700;
        border-radius: 10rpx;
        margin: 50rpx 0;
    }

</style>
